<template>
	<vCommonPage style="height: 100vh;" :type="1" :title="$route.query.title">
		<div slot="customContent">
			<div class="title">
				请如下图所示，将银行卡插入自助机指定位置
			</div>
			<div class="conentImg" @click="gotoMzgh()">
				<img class="modelImg" src="../../assets/images/readcard/吉大读卡提示/zizhuji_img.png" />
				<div class="pointBoxtYhk">
					<div>
					<img class="kuangImg" src="../../assets/images/readcard/吉大读卡提示/kuang.png">
					</div>
					<img class="souzhiImg" src="../../assets/images/readcard/吉大读卡提示/shouzhi.gif" />
				</div>
			</div>
			<div class="bottomBox">
				<el-button class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		FourInOneReader
	} from "@api/tools/Hardware.js";
	export default {
		components: {
			idReader: new FourInOneReader(),
		},
		name: "mzgh",
		data() {
			return {
				urlName:'',
				title:''
			};
		},
		methods: {
			ReckonTime() {},
			//前往门诊挂号页面
			gotoMzgh() {
				//银行卡插入完成
				this.$store.dispatch('payCard/updateCardNo', '111')
				this.$router.push({
					name: this.$route.query.name,
					query:{
						title:this.$route.query.title,
						code: this.$route.query.code
					}
				})
			},
			async BeginReadID() {
				console.log("%c BeginReadeID", "color:#01DFA5");
				if (this.destroyed) {
					return; // 防止页面关闭后 继续调用
				}
				///////////////////////////// 异步写法
				try {
					/** 读银行卡 */
					let info = await this.idReader.Read();
					console.log(info,'info!!')
					if (info.ID != "") {
						console.log('success!')
						this.idInfo = info;
						//前往下一个页面
					} else {
						this.timerhandle = setTimeout(() => this.BeginReadID(), 100);
					}
				} catch (e) {
					console.log(`%c error: ${e.message}`, "color:red");
					MessageBox.alert("未检索到银行卡，请重新操作。", {
						confirmButtonText: "确定",
						callback: action => {
							// setTimeout(() => {
							// 	this.$router.push({
							// 		name: "homepage"
							// 	});
							// }, 500);
						}
					});
				}
			},
		},
		computed: {

		},
		mounted() {
			console.log("this.idReader")
			this.idReader
				.Open()
				.then(() => this.BeginReadID())
				.catch(e => {
					MessageBox.alert(e.message, '读卡错误', {
						confirmButtonText: "确定",
						callback: action => {
							// setTimeout(() => {
							// 	this.$router.push({
							// 		name: "homepage"
							// 	});
							// }, 300);
						}
					});
				});
		},
		created() {
		   let query = this.$route.query;
		   this.urlName = this.$route.query.name;
		},
		beforeDestroy() {
			this.idReader.Close();
			if (this.timerhandle != null) {
				clearTimeout(this.timerhandle);
				this.timerhandle = null;
			}
			this.destroyed = true;
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/css/skzs.scss";
</style>
